<template>
	<view class="cal-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/dkBg.png)'}]">
		<cu-custom :isBack="true" :isWhiteBack="true" style="background-color: transparent;">
			<block slot="backText"></block>
			<block slot="content">
				<view class="custom-white-title">打卡日历</view>
			</block>
		</cu-custom>
		<view class="padding-top-248 padding-left-52">
			<view class="cal-title">打卡任务</view>
			<view class="padding-top-16 cal-title">Clock in task</view>
		</view>
		<view class="padding-32">
			<view class="clock-content">
				<view class="clock-title">近一个月打卡情况</view>
				<view class="flex padding-top-32">
					<view class="flex-sub text-center">
						<view>
							<text class="clock-num text-48">0</text>
							<text class="clock-num text-df padding-left-8">天</text>
						</view>
						<view class="padding-top-12 text-black text-sm">累计打卡</view>
					</view>
					<view class="flex-sub text-center">
						<view>
							<text class="clock-num text-48">0</text>
							<text class="clock-num text-df padding-left-8">次</text>
						</view>
						<view class="padding-top-12 text-black text-sm">打卡次数</view>
					</view>
					<view class="flex-sub text-center">
						<view>
							<text class="clock-num text-48">0</text>
							<text class="clock-num text-df padding-left-8">次</text>
						</view>
						<view class="padding-top-12 text-black text-sm">未打卡次数</view>
					</view>
				</view>
			</view>

			<view class=" margin-top-32">
				<uni-calendar :insert="true" :lunar="true" @change="change" />
				<!-- <view class="margin-top-48 flex align-center justify-start">
					<view class="ready-dk"></view>
					<view class="ready-dk-text">已打卡</view>
					<view class="unready-dk"></view>
					<view class="ready-dk-text">未打卡</view>
				</view> -->
				<view class="look-btn" @click="toClockInfo">查看详情</view>
			</view>
			<view class="clock-join-content">
				<image src="https://txr001.zthj.net/static/img/dkJoin.png" class="clock-join-img"></image>
				<image src="https://txr001.zthj.net/static/img/dkJoin.png" class="clock-join-img"></image>
			</view>
			<view class="clock-list-content">
				<view class="text-center" v-if="clockList.length==0">
					<image src="https://txr001.zthj.net/static/noData.png" class="img-572"></image>
					<view class="no-data-text">暂无打卡任务</view>
				</view>
				<view v-for="(item,index) in clockList" :key="index">
					<view class="clock-border" v-if="item.is_join==0">
						<view class="flex align-center justify-between">
							<view>
								<text class="clock-type wei-type">微</text>
								<text class="clock-type-title">{{item.title}}</text>
							</view>
							<view>
								<image src="https://txr001.zthj.net/static/img/yzm.png" class="img-28 text-img-center">
								</image>
								<text class="text-share">分享</text>
							</view>
						</view>
						<view class="padding-top-24 flex align-center justify-start padding-bottom-32 solids-bottom">
							<view class="clock-rule"
								v-if="item.dk_start_time == '00:00' && item.dk_end_time == '23:59'">打卡时间：全天</view>
							<view class="clock-rule"
								v-else="item.dk_start_time == '00:00' && item.dk_end_time == '23:59'">
								打卡时间：{{item.dk_start_time}}-{{item.dk_end_time}}</view>
							<view class="clock-rule">允许补卡</view>
						</view>
						<view class="flex align-center justify-between padding-top-32">
							<view class="text-black text-sm">发布者</view>
							<view class="text-black text-sm">{{item.nickname}}</view>
						</view>
						<view class="padding-top-16 text-black text-sm">打卡内容：</view>
						<view class="padding-top-16 text-black text-sm">
							<view>1、在规定时间内打卡</view>
							<view>2、打卡地点为微废处理车间</view>
							<view>3、上传3张微废处理照片</view>
						</view>
						<view class="clock-dk-btn" @click="goPage('/pages/clock/clockList?s_id='+item.s_id+'&date='+date,true)">
							打卡
						</view>
					</view>

					<view class="clock-border" v-else>
						<view class="flex align-center justify-between">
							<view>
								<text class="clock-type gu-type">固</text>
								<text class="clock-type-title">{{item.title}}</text>
							</view>
							<view class="dkComplate-content">
								<image src="https://txr001.zthj.net/static/img/dkComplate.png" class="img-290"></image>
							</view>
						</view>
						<view class="padding-top-24 flex align-center justify-start padding-bottom-32 solids-bottom">
							<view class="clock-rule"
								v-if="item.dk_start_time == '00:00' && item.dk_end_time == '23:59'">打卡时间：全天</view>
							<view class="clock-rule"
								v-else="item.dk_start_time == '00:00' && item.dk_end_time == '23:59'">
								打卡时间：{{item.dk_start_time}}-{{item.dk_end_time}}</view>
							<view class="clock-rule">允许补卡</view>
						</view>
						<view class="flex align-center justify-between padding-top-32">
							<view class="text-black text-sm">发布者</view>
							<view class="text-black text-sm">{{item.nickname}}</view>
						</view>
						<view class="padding-top-16 text-black text-sm">打卡内容：</view>
						<view class="padding-top-16 text-black text-sm">
							<view>1、在规定时间内打卡</view>
							<view>2、打卡地点为微废处理车间</view>
							<view>3、上传3张微废处理照片</view>
						</view>

						<view class="padding-top-12">
							<liu-progressbar :progress="70" :textInside="false" bgColor="#24458E" dsColor="#D9D9D9"
								color="#000000" :height="'14rpx'" />
						</view>
						<view class="clock-dk-btn">
							查看详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actDay: [], //打卡
				chooseDay: [], //未打卡
				clockList: [{}],
				show: true,
				date:''
			}
		},
		onLoad() {
			let time = new Date();
			// console.log(date);
			let date = this.$u.timeFormat(time, 'yyyy-mm-dd');
			// console.log(date);
			this.date = date;
			this.getList(date);
		},
		methods: {
			// 展开日历
			onDayClick(data) {
				let choose = data.date //用户点中的数据
				if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
					// 移除元素下标
					const index = this.actDay.indexOf(choose);
					//删除用户点击的日期
					this.actDay.splice(index, 1)
				} else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
					uni.showToast({
						title: "这个日期已经被投标了",
						icon: "none"
					})
				} else {
					//添加用户点击的日期
					this.actDay.push(choose);
				}
				console.log(this.actDay)
			},
			toClockInfo() {
				uni.navigateTo({
					url: "/pages/clock/clockInfo"
				})
			},
			getList: async function(date) {
				let res = await this.$api.getClock({
					date:date
				});

				this.clockList = res;
			},

			change: async function(e) {
				// console.log(e.fulldate)
				this.date = e.fulldate;
				await this.getList(e.fulldate)
			}
		}
	}
</script>

<style scoped lang="less">
	.cal-content {
		background-size: 100% 100%;
		width: 100%;
		height: 776rpx;

		.cal-title {
			font-size: 48rpx;
			font-weight: 600;
			color: #FFFFFF;
		}

		.clock-content {
			background: #FFFFFF;
			border-radius: 48rpx;
			padding: 32rpx;
			margin-top: 32rpx;

			.ready-dk {
				width: 32rpx;
				height: 32rpx;
				background: #0CD5A1;
				border-radius: 10rpx;
			}

			.ready-dk-text {
				font-size: 20rpx;
				font-weight: 400;
				color: #000000;
				padding-left: 8rpx;
			}

			.unready-dk {
				width: 32rpx;
				height: 32rpx;
				background: #CBCBCB;
				border-radius: 10rpx;
				margin-left: 32rpx;
			}

			.clock-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}

			.clock-num {
				font-weight: 600;
				color: #000000;
			}


		}

		.look-btn {
			margin: 56rpx 52rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #24458E;
			box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
			border-radius: 48rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}

		.clock-join-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: -32rpx 32rpx 0;

			.clock-join-img {
				width: 28rpx;
				height: 152rpx;
			}
		}

		.clock-list-content {
			background: #FFFFFF;
			border-radius: 48rpx;
			margin-top: -64rpx;
			padding: 32rpx;

			.no-data-text {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
				padding: 20rpx 0 94rpx;
			}

			.clock-border {
				position: relative;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 48rpx;
				border: 4rpx solid #000000;
				margin-top: 48rpx;
				padding: 30rpx 32rpx 52rpx;

				.text-share {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					vertical-align: middle;
					padding-left: 12rpx;
				}

				.clock-type {
					width: 48rpx;
					height: 48rpx;
					padding: 12rpx 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 15rpx 0 15rpx 0;
				}

				.wei-type {
					background: #E6E6E6;
					color: #000000;
				}

				.gu-type {
					background: #000000;
					color: #fff;
				}

				.clock-type-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
					padding-left: 16rpx;
				}

				.clock-rule {
					padding: 10rpx 20rpx;
					background: #FFFFFF;
					border-radius: 48rpx;
					border: 2rpx solid #000000;
					font-size: 20rpx;
					font-weight: 400;
					color: #000000;
					margin-right: 24rpx;
				}

				.clock-dk-btn {
					margin: 48rpx 18rpx 0;
					height: 56rpx;
					line-height: 56rpx;
					background: #24458E;
					box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
					border-radius: 48rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.dkComplate-content {
		position: absolute;
		right: 0;
		top: 0;
	}
</style>